<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.Map" %>
<%@ page import="org.example.entity.User" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - 内容评级平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        neutral: {
                            100: '#F2F3F5',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类和动画 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200;
            }
            .form-label {
                @apply block text-sm font-medium text-neutral-700 mb-1;
            }
            .error-message {
                @apply text-danger text-xs mt-1 block;
            }
        }

        /* 动画效果 */
        @keyframes fade-in {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fade-out {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-20px); }
        }

        .animate-fade-in {
            animation: fade-in 0.3s ease-out forwards;
        }

        .animate-fade-out {
            animation: fade-out 0.3s ease-out forwards;
        }
    </style>
</head>
<body class="bg-neutral-100 min-h-screen font-inter">
<%
    // 处理注册成功消息
    String registerSuccess = (String) request.getAttribute("registerSuccess");
    if (registerSuccess != null) {
%>
<div id="successToast" class="fixed top-4 right-4 z-50 animate-fade-in">
    <div class="bg-success text-white px-6 py-3 rounded-lg shadow-lg flex items-center">
        <i class="fa fa-check-circle mr-2"></i>
        <%= registerSuccess %>
    </div>
</div>
<script>
    // 显示成功消息并跳转
    setTimeout(function() {
        window.location.href = "Userlogin.jsp";
    }, 2000);
</script>
<%
    }

    // 处理错误消息
    Map<String, String> errors = (Map<String, String>) request.getAttribute("errors");
%>

<div class="container mx-auto px-4 py-12 md:py-20 max-w-4xl">
    <!-- 页面标题 -->
    <div class="text-center mb-10">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-neutral-700 mb-3">内容评级平台</h1>
        <p class="text-neutral-500 max-w-xl mx-auto">创建您的账户</p>
    </div>

    <!-- 主卡片 -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="grid md:grid-cols-2">
            <!-- 左侧图片区域 -->
            <div class="hidden md:block bg-gradient-to-br from-primary to-secondary p-8 flex flex-col items-center justify-center">
                <div class="text-white text-center mb-8">
                    <i class="fa fa-user-plus text-[100px] mb-6 opacity-80"></i>
                    <h3 class="text-2xl font-semibold mb-3">创建新账号</h3>
                    <p class="opacity-90">填写以下信息完成注册</p>
                </div>

                <!-- 已注册提示 -->
                <div class="mt-auto text-center text-white/90">
                    <p>已经有账号?</p>
                    <a href="Userlogin.jsp" class="inline-block mt-4 px-6 py-3 bg-white/20 backdrop-blur-sm rounded-lg text-white font-medium btn-hover">
                        <i class="fa fa-sign-in mr-2"></i>立即登录
                    </a>
                </div>
            </div>

            <!-- 右侧表单区域 -->
            <div class="p-6 md:p-10">
                <!-- 移动端登录链接 -->
                <div class="md:hidden mb-6 text-center">
                    <p class="text-neutral-500">已有账号？<a href="Userlogin.jsp" class="text-primary font-medium">立即登录</a></p>
                </div>

                <!-- 注册表单 -->
                <form id="registerForm" action="Userregister" method="post" enctype="multipart/form-data">
                    <!-- 头像上传 -->
                    <div class="mb-6">
                        <label class="form-label">
                            <i class="fa fa-image mr-1"></i>头像
                        </label>
                        <div class="flex items-center space-x-4">
                            <div class="relative">
                                <div id="avatarPreview" class="w-24 h-24 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden border-2 border-neutral-300">
                                    <i class="fa fa-user text-neutral-400 text-2xl"></i>
                                    <img id="avatarImage" src="" alt="头像预览" class="w-full h-full object-cover hidden">
                                </div>
                                <label for="avatar" class="absolute bottom-0 right-0 bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center cursor-pointer shadow-md">
                                    <i class="fa fa-camera text-sm"></i>
                                    <input type="file" id="avatar" name="avatar" accept="image/*" class="hidden">
                                </label>
                            </div>
                            <div class="text-sm text-neutral-500">
                                <p class="mb-1">支持JPG、PNG格式</p>
                                <p>建议尺寸200×200px，最大2MB</p>
                            </div>
                        </div>
                        <%
                            if (errors != null && errors.containsKey("avatarError")) {
                        %>
                        <div class="error-message"><%= errors.get("avatarError") %></div>
                        <%
                            }
                        %>
                    </div>

                    <!-- 用户名 -->
                    <div class="mb-6">
                        <label for="username" class="form-label">
                            <i class="fa fa-user mr-1"></i>用户名
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                <i class="fa fa-user"></i>
                            </span>
                            <input type="text" id="username" name="username" required
                                   pattern="\w{4,16}" title="4-16位字母数字下划线"
                                   class="pl-10 w-full rounded-lg
                                   <%= (errors != null && errors.containsKey("usernameError")) ? "border-danger" : "border-neutral-300" %>
                                   py-3 px-4 text-neutral-700 form-input-focus"
                                   placeholder="请输入用户名"
                                   value="<%= request.getParameter("username") != null ? request.getParameter("username") : "" %>">
                        </div>
                        <%
                            if (errors != null && errors.containsKey("usernameError")) {
                        %>
                        <div class="error-message"><%= errors.get("usernameError") %></div>
                        <%
                            }
                        %>
                    </div>

                    <!-- 密码 -->
                    <div class="mb-6">
                        <label for="password" class="form-label">
                            <i class="fa fa-lock mr-1"></i>密码
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                <i class="fa fa-lock"></i>
                            </span>
                            <input type="password" id="password" name="password" required
                                   pattern="(?=.*\d)(?=.*[a-zA-Z]).{6,18}"
                                   title="6-18位，必须包含字母和数字"
                                   class="pl-10 w-full rounded-lg
                                   <%= (errors != null && errors.containsKey("passwordError")) ? "border-danger" : "border-neutral-300" %>
                                   py-3 px-4 text-neutral-700 form-input-focus"
                                   placeholder="请输入密码">
                            <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 hover:text-neutral-600">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                        <%
                            if (errors != null && errors.containsKey("passwordError")) {
                        %>
                        <div class="error-message"><%= errors.get("passwordError") %></div>
                        <%
                            }
                        %>
                    </div>

                    <!-- 性别 -->
                    <div class="mb-6">
                        <label class="form-label">
                            <i class="fa fa-venus-mars mr-1"></i>性别
                        </label>
                        <div class="grid grid-cols-3 gap-3">
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:bg-neutral-50 transition-colors">
                                <input type="radio" name="gender" value="male" class="mr-2 text-primary"
                                    <%= (request.getParameter("gender") == null || "male".equals(request.getParameter("gender"))) ? "checked" : "" %>>
                                <i class="fa fa-male mr-1 text-blue-500"></i>男
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:bg-neutral-50 transition-colors">
                                <input type="radio" name="gender" value="female" class="mr-2 text-primary"
                                    <%= "female".equals(request.getParameter("gender")) ? "checked" : "" %>>
                                <i class="fa fa-female mr-1 text-pink-500"></i>女
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:bg-neutral-50 transition-colors">
                                <input type="radio" name="gender" value="other" class="mr-2 text-primary"
                                    <%= "other".equals(request.getParameter("gender")) ? "checked" : "" %>>
                                <i class="fa fa-transgender mr-1 text-purple-500"></i>其他
                            </label>
                        </div>
                    </div>

                    <!-- 邮箱 -->
                    <div class="mb-6">
                        <label for="email" class="form-label">
                            <i class="fa fa-envelope mr-1"></i>电子邮箱
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                <i class="fa fa-envelope"></i>
                            </span>
                            <input type="email" id="email" name="email" required
                                   class="pl-10 w-full rounded-lg
                                   <%= (errors != null && errors.containsKey("emailError")) ? "border-danger" : "border-neutral-300" %>
                                   py-3 px-4 text-neutral-700 form-input-focus"
                                   placeholder="example@example.com"
                                   value="<%= request.getParameter("email") != null ? request.getParameter("email") : "" %>">
                        </div>
                        <%
                            if (errors != null && errors.containsKey("emailError")) {
                        %>
                        <div class="error-message"><%= errors.get("emailError") %></div>
                        <%
                            }
                        %>
                    </div>

                    <!-- 手机号 -->
                    <div class="mb-6">
                        <label for="phone" class="form-label">
                            <i class="fa fa-phone mr-1"></i>手机号
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                <i class="fa fa-phone"></i>
                            </span>
                            <input type="tel" id="phone" name="phone" required
                                   pattern="1[3-9]\d{9}" title="请输入有效的手机号"
                                   class="pl-10 w-full rounded-lg
                                   <%= (errors != null && errors.containsKey("phoneError")) ? "border-danger" : "border-neutral-300" %>
                                   py-3 px-4 text-neutral-700 form-input-focus"
                                   placeholder="请输入11位手机号码"
                                   value="<%= request.getParameter("phone") != null ? request.getParameter("phone") : "" %>">
                        </div>
                        <%
                            if (errors != null && errors.containsKey("phoneError")) {
                        %>
                        <div class="error-message"><%= errors.get("phoneError") %></div>
                        <%
                            }
                        %>
                    </div>

                    <!-- 同意条款 -->
                    <div class="mb-8">
                        <label class="flex items-start cursor-pointer">
                            <input type="checkbox" id="agreeTerms" name="agreeTerms" required class="mt-1 text-primary"
                                <%= "on".equals(request.getParameter("agreeTerms")) ? "checked" : "" %>>
                            <span class="ml-2 text-sm text-neutral-600">
                                我已阅读并同意<a href="#" class="text-primary hover:underline">用户协议</a>和<a href="#" class="text-primary hover:underline">隐私政策</a>
                            </span>
                        </label>
                        <%
                            if (errors != null && errors.containsKey("agreeTermsError")) {
                        %>
                        <div class="error-message"><%= errors.get("agreeTermsError") %></div>
                        <%
                            }
                        %>
                    </div>

                    <!-- 提交按钮 -->
                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 btn-hover flex items-center justify-center">
                        <i class="fa fa-user-plus mr-2"></i>
                        立即注册
                    </button>

                    <!-- 分隔线 -->
                    <div class="relative my-6">
                        <div class="absolute inset-0 flex items-center">
                            <div class="w-full border-t border-neutral-200"></div>
                        </div>
                        <div class="relative flex justify-center text-sm">
                            <span class="px-2 bg-white text-neutral-400">其他方式注册</span>
                        </div>
                    </div>

                    <!-- 社交登录 -->
                    <div class="grid grid-cols-3 gap-4">
                        <a href="#" class="flex items-center justify-center p-3 border border-neutral-300 rounded-lg hover:bg-neutral-50 transition-colors">
                            <i class="fa fa-weixin text-[#07C160] text-xl"></i>
                        </a>
                        <a href="#" class="flex items-center justify-center p-3 border border-neutral-300 rounded-lg hover:bg-neutral-50 transition-colors">
                            <i class="fa fa-qq text-[#1DA1F2] text-xl"></i>
                        </a>
                        <a href="#" class="flex items-center justify-center p-3 border border-neutral-300 rounded-lg hover:bg-neutral-50 transition-colors">
                            <i class="fa fa-weibo text-[#E6162D] text-xl"></i>
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="text-center mt-8 text-neutral-500 text-sm">
        <p>© 2025 大运版权所有</p>
    </div>
</div>

<!-- 添加JavaScript -->
<script>
    // 显示错误提示
    function showErrorToast(message) {
        const toast = document.createElement('div');
        toast.className = 'fixed top-4 right-4 z-50';
        toast.innerHTML = `
            <div class="bg-danger text-white px-6 py-3 rounded-lg shadow-lg flex items-center animate-fade-in">
                <i class="fa fa-exclamation-circle mr-2"></i>
                ${message}
            </div>
        `;
        document.body.appendChild(toast);

        // 3秒后自动消失
        setTimeout(() => {
            toast.classList.add('animate-fade-out');
            setTimeout(() => toast.remove(), 500);
        }, 3000);
    }

    // 头像预览功能
    document.getElementById('avatar').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            // 统一头像大小限制为2MB，与后端保持一致
            if (file.size > 2 * 1024 * 1024) {
                showErrorToast('头像大小不能超过2MB');
                this.value = '';
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                const avatarPreview = document.getElementById('avatarPreview');
                const avatarImage = document.getElementById('avatarImage');
                avatarImage.src = e.target.result;
                avatarImage.classList.remove('hidden');
                avatarPreview.querySelector('i').classList.add('hidden');
            }
            reader.readAsDataURL(file);
        }
    });

    // 密码显示/隐藏切换
    document.getElementById('togglePassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('password');
        const icon = this.querySelector('i');
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.replace('fa-eye-slash', 'fa-eye');
        } else {
            passwordInput.type = 'password';
            icon.classList.replace('fa-eye', 'fa-eye-slash');
        }
    });

    // 表单提交前验证
    document.getElementById('registerForm').addEventListener('submit', function(e) {
        const agreeTerms = document.getElementById('agreeTerms');
        if (!agreeTerms.checked) {
            e.preventDefault();
            showErrorToast('请阅读并同意用户协议和隐私政策');
            return false;
        }

        // 显示加载状态
        const submitButton = this.querySelector('button[type="submit"]');
        submitButton.disabled = true;
        submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 注册中...';

        // 如果有通用错误消息，显示它
        <%
        if (errors != null && errors.containsKey("generalError")) {
        %>
        e.preventDefault();
        showErrorToast('<%= errors.get("generalError") %>');
        submitButton.disabled = false;
        submitButton.innerHTML = '<i class="fa fa-user-plus mr-2"></i>立即注册';
        <%
        }
        %>
    });

    // 表单字段实时验证
    document.querySelectorAll('#registerForm input').forEach(input => {
        input.addEventListener('input', function() {
            // 移除之前的错误样式
            this.classList.remove('border-danger');

            // 如果有对应的错误消息，隐藏它
            const fieldName = this.getAttribute('name');
            const errorElement = document.querySelector(`.error-message`);
            if (errorElement && errorElement.textContent.includes(fieldName + 'Error')) {
                errorElement.style.display = 'none';
            }
        });
    });

    // 页面加载时显示错误提示
    document.addEventListener('DOMContentLoaded', function() {
        <%
        if (errors != null) {
            for (Map.Entry<String, String> error : errors.entrySet()) {
                if (!"generalError".equals(error.getKey()) &&
                    !"avatarError".equals(error.getKey()) &&
                    !"usernameError".equals(error.getKey()) &&
                    !"passwordError".equals(error.getKey()) &&
                    !"emailError".equals(error.getKey()) &&
                    !"phoneError".equals(error.getKey()) &&
                    !"agreeTermsError".equals(error.getKey())) {
        %>
        showErrorToast('<%= error.getValue() %>');
        <%
                }
            }
        }
        %>
    });
</script>
</body>
</html>